<template>
  <div class="login-page">
    <div class="login-wrap">
      <div class="login">
        <!-- Logo -->
        <h1 class="login-title">
          <span class="login-title__item login-title__ico"></span>
          <span class="login-title__item login-title__text">康远广告数据平台</span>
        </h1>

        <div class="login-form">
          <!-- 用户 -->
          <label class="login-input login-input--user">
            <span class="login-input__ico"></span>
            <span
              @click="clearUserName"
              v-show="loginRequestData.userName"
              class="login-input__clear"
            ></span>
            <input
              v-model="loginRequestData.userName"
              type="text"
              class="login-input__input"
            />
            <span class="login-input__border"></span>
          </label>

          <!-- 密码 -->
          <label class="login-input login-input--pass">
            <span class="login-input__ico"></span>
            <input
              v-model="loginRequestData.pwd"
              type="password"
              class="login-input__input"
            />
            <span class="login-input__border"></span>
          </label>

          <!-- 登录 -->
          <input
            @click="login"
            type="submit"
            class="login-submit"
          />
        </div>

        <!-- 提示 -->
        <div
          v-show="loginTipVisible"
          class="login-tip"
        >
          <span class="login-tip__item login-tip__ico"></span>
          <span class="login-tip__item login-tip__text">{{loginTipText}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sessionStorage, cookieStorage, md5 } from "@/util";
import { fetchLogin } from "@/api";

export default {
  name: "Login",
  methods: {
    // 登录非空验证
    validLogin(data) {
      // 账号
      if (!data.userName) {
        return {
          visible: false,
          message: "请输入您的账号！"
        };
      }
      // 密码
      if (!data.pwd) {
        return {
          visible: false,
          message: "请输入您的密码！"
        };
      }
      return {
        visible: true,
        message: ""
      };
    },

    // 登录
    login() {
      let instance = this.$loading({
        fullscreen: true,
        text: "加载中...",
        background: "rgba(0, 0, 0, 0.7)"
      });
      fetchLogin({
        data: Object.assign({}, this.loginRequestData, {
          pwd: md5(this.loginRequestData.pwd)
        })
      })
        .then(res => {
          instance.close();
          if (res.status === "1") {
            sessionStorage.set("Login", {
              nick: res.nick,
              type: res.type,
              userId: res.userId
            });
            cookieStorage.set("userId", res.userId);
            // 就一个页面，直接跳转到实时数据
            this.$router.push({
              name: "data-man"
            });
          } else {
            this.loginTipText = "账号或密码错误，请重新输入！";
          }
          this.loginTipVisible = res.status !== "1";
        })
        .catch(() => {});
    },

    // 清除账号输入框
    clearUserName() {
      if (this.loginRequestData.userName) this.loginRequestData.userName = "";
    }
  },
  watch: {
    // 检测输入变化，改变提示信息
    loginRequestData: {
      handler(data) {
        let valid = this.validLogin(data);
        if (!valid.visible) {
          this.loginTipText = valid.message;
        }
        this.loginTipVisible = !valid.visible;
      },
      deep: true
    }
  },
  data() {
    return {
      // 登录提交的数据
      loginRequestData: {
        userName: "",
        pwd: ""
      },

      // 是否显示登录错误提示
      loginTipVisible: false,
      loginTipText: ""
    };
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/common/css/__color.scss";

.login-page {
  width: 100%;
  height: 100%;
  background: url(../assets/login/bg.jpg) 50% 50% no-repeat;
}

.login-wrap {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 366px;
  margin-top: -190px;
  background: rgba(0, 0, 0, 0.7);
}

.login {
  position: absolute;
  left: 50%;
  margin-left: -480px;
  width: 920px;
  color: #fff;
  padding: 40px 0 0 40px;
}

.login-title {
  margin-bottom: 20px;
  &__item {
    display: inline-block;
    vertical-align: middle;
  }
  &__ico {
    width: 64px;
    height: 64px;
    margin-right: 20px;
    background: url(../assets/common/img/logo-big.png) 0 0 no-repeat;
  }
  &__text {
    font-size: 68px;
    line-height: 136px;
    font-weight: 700;
  }
}

.login-form {
  margin-bottom: 25px;
  height: 68px;
}

.login-input {
  position: relative;
  float: left;
  width: 370px;
  height: 66px;
  background: #fff;
  &__border {
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid $borderColor;
    width: 100%;
    height: 100%;
  }
  &__ico,
  &__clear {
    z-index: 1;
  }
  &__ico {
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    height: 66px;
  }
  &__clear {
    position: absolute;
    right: 26px;
    top: 20px;
    width: 27px;
    height: 27px;
    background: url(../assets/login/clear.png) 0 0 no-repeat;
    cursor: pointer;
  }
  &__input {
    width: 250px;
    height: 34px;
    font-size: 22px;
    margin: 16px 63px 16px 58px;
    background: transparent;
    border: 0 none;
    outline: none;
    &::-ms-clear {
      display: none;
    }
    &::placeholder {
      color: #ccc;
    }
    &:-webkit-autofill {
      box-shadow: 0 0 0 1000px white inset !important;
    }
    &:focus ~ .login-input__border {
      border-color: $majorColor;
    }
  }

  &--user {
    margin-right: 31px;
  }
  &--user &__ico {
    background: url(../assets/login/user.png) 50% 50% no-repeat;
  }
  &--pass {
    margin-right: 40px;
  }
  &--pass &__ico {
    background: url(../assets/login/pass.png) 50% 50% no-repeat;
  }
}

.login-submit {
  float: left;
  width: 68px;
  height: 68px;
  background: url(../assets/login/login.png) 0 0 no-repeat;
  border: 0 none;
  text-indent: -999em;
  outline: none;
  cursor: pointer;
}

.login-tip {
  overflow: hidden;
  padding: 1px 0;
  &__item {
    float: left;
  }
  &__ico {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    background: url(../assets/login/tip.png) 0 0 no-repeat;
  }
  &__text {
    line-height: 32px;
    font-size: 22px;
    color: #fff;
  }
}
</style>
